<template>
  <div class="flower-care-page">
    <h2 class="section-title">鲜花养护指南</h2>
    <p class="section-description">学习如何让您的鲜花保持更长时间的美丽</p>
    
    <div class="care-tips">
      <div class="tip-card" v-for="tip in careTips" :key="tip.id">
        <div class="tip-icon">{{ tip.icon }}</div>
        <div class="tip-content">
          <h3 class="tip-title">{{ tip.title }}</h3>
          <p class="tip-description">{{ tip.description }}</p>
        </div>
      </div>
    </div>
    
    <div class="care-guide">
      <h3 class="guide-title">常见花卉养护方法</h3>
      
      <div class="accordion">
        <div 
          class="accordion-item" 
          v-for="(item, index) in guideItems" 
          :key="index"
          :class="{ 'active': activeGuide === index }"
        >
          <div class="accordion-header" @click="toggleGuide(index)">
            <h4 class="accordion-title">{{ item.title }}</h4>
            <span class="accordion-icon">{{ activeGuide === index ? '−' : '+' }}</span>
          </div>
          <div class="accordion-content" v-show="activeGuide === index">
            <p>{{ item.content }}</p>
            <ul class="care-steps" v-if="item.steps">
              <li v-for="(step, stepIndex) in item.steps" :key="stepIndex">
                {{ step }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div class="video-section">
      <h3 class="section-title">视频教程</h3>
      <div class="video-container">
        <div class="video-placeholder">
          <div class="play-button">▶</div>
          <p>花束保鲜技巧视频教程</p>
        </div>
      </div>
    </div>
    
    <div class="care-products">
      <h3 class="section-title">推荐养护产品</h3>
      <div class="products-grid">
        <div class="product-card" v-for="product in careProducts" :key="product.id">
          <div class="product-image" :style="{ backgroundColor: product.color }"></div>
          <h4 class="product-title">{{ product.name }}</h4>
          <p class="product-price">¥{{ product.price }}</p>
          <button class="btn-outline">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowerCareGuide',
  data() {
    return {
      activeGuide: 0,
      careTips: [
        {
          id: 1,
          icon: '💧',
          title: '定期更换水',
          description: '每1-2天更换一次花瓶中的水，确保水质清洁，防止细菌滋生。'
        },
        {
          id: 2,
          icon: '✂️',
          title: '修剪花茎',
          description: '每次更换水时，将花茎斜剪约1-2厘米，增加吸水面积。'
        },
        {
          id: 3,
          icon: '🌡️',
          title: '避免阳光直射',
          description: '将鲜花放在阴凉处，避免阳光直射和高温环境。'
        },
        {
          id: 4,
          icon: '🍬',
          title: '添加营养液',
          description: '在水中加入少量白糖或专业花卉营养液，延长花期。'
        }
      ],
      guideItems: [
        {
          title: '玫瑰花养护',
          content: '玫瑰是最受欢迎的鲜切花之一，正确的养护可以让它们保持7-10天的美丽。',
          steps: [
            '收到玫瑰后，先将花茎斜剪约2厘米，去除下部叶片。',
            '使用干净的花瓶，加入温水和花卉营养液。',
            '每2天更换一次水，并重新修剪花茎。',
            '避免将玫瑰放在水果旁边，因为水果释放的乙烯会加速花朵凋谢。'
          ]
        },
        {
          title: '百合花养护',
          content: '百合花优雅高贵，但花粉容易沾染衣物，需要特别注意。',
          steps: [
            '收到百合后，小心地剪去花蕊上的花药，防止花粉散落。',
            '将花茎斜剪，放入深水花瓶中，水位应达到花茎的1/3。',
            '百合喜欢凉爽环境，避免放在暖气或空调出风口附近。',
            '每2-3天更换一次水，保持水质清新。'
          ]
        },
        {
          title: '郁金香养护',
          content: '郁金香喜欢凉爽的环境，正确养护可以延长花期。',
          steps: [
            '收到郁金香后，将花茎斜剪约1厘米，去除下部叶片。',
            '使用干净的花瓶，加入冷水，水位不要超过花茎的一半。',
            '郁金香会继续生长，所以选择较高的花瓶。',
            '每天更换水，并将花瓶放在凉爽处，避免阳光直射。'
          ]
        },
        {
          title: '康乃馨养护',
          content: '康乃馨是长寿花，正确养护可以保持2-3周。',
          steps: [
            '收到康乃馨后，将花茎斜剪约2厘米，并在切口处划一个十字。',
            '在水中加入少量白糖和几滴醋，有助于延长花期。',
            '每3天更换一次水，并重新修剪花茎。',
            '避免将康乃馨放在水果旁边或阳光直射处。'
          ]
        }
      ],
      careProducts: [
        {
          id: 1,
          name: '花卉营养液',
          price: 29.9,
          color: '#e8f5e9'
        },
        {
          id: 2,
          name: '专业花剪',
          price: 49.9,
          color: '#e3f2fd'
        },
        {
          id: 3,
          name: '玻璃花瓶',
          price: 89.9,
          color: '#f3e5f5'
        },
        {
          id: 4,
          name: '花卉保鲜剂',
          price: 39.9,
          color: '#fff3e0'
        }
      ]
    };
  },
  methods: {
    toggleGuide(index) {
      if (this.activeGuide === index) {
        this.activeGuide = -1;
      } else {
        this.activeGuide = index;
      }
    }
  }
};
</script>

<style scoped>
.flower-care-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.care-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.tip-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.tip-card:hover {
  transform: translateY(-5px);
}

.tip-icon {
  font-size: 2rem;
}

.tip-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.tip-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

.care-guide {
  margin-bottom: 3rem;
}

.guide-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #e75480;
}

.accordion {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  padding: 1.2rem;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.accordion-header:hover {
  background-color: #f9f9f9;
}

.accordion-item.active .accordion-header {
  background-color: #f8e1e7;
}

.accordion-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.accordion-icon {
  font-size: 1.2rem;
  color: #e75480;
}

.accordion-content {
  padding: 1.2rem;
  background-color: rgba(249, 249, 249, 0.9);
  line-height: 1.6;
}

.care-steps {
  margin-top: 1rem;
  padding-left: 1.5rem;
}

.care-steps li {
  margin-bottom: 0.5rem;
}

.video-section {
  margin-bottom: 3rem;
}

.video-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-placeholder {
  height: 300px;
  background-color: rgba(245, 245, 245, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}

.play-button {
  width: 60px;
  height: 60px;
  background-color: #e75480;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.play-button:hover {
  transform: scale(1.1);
}

.care-products {
  margin-bottom: 2rem;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  height: 150px;
}

.product-title {
  padding: 1rem 1rem 0.5rem;
  font-size: 1rem;
}

.product-price {
  padding: 0 1rem 1rem;
  color: #e75480;
  font-weight: bold;
}

.btn-outline {
  display: block;
  width: 100%;
  padding: 0.8rem;
  background: none;
  border: none;
  border-top: 1px solid #eee;
  color: #e75480;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

@media (max-width: 768px) {
  .care-tips {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style>